import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    <div>
      <p>Name: {{name}}</p>
      <p>Name: {{getName()}}</p>
      <p>Number: {{number}}</p>
      <p>FullName: {{fullName}}</p>
      <p><input type="text" v-model="number"></p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
      <p>LastName: <input type="text" v-model="lastName"></p>
      <p>Name: <input type="text" v-model="name"></p>
      <p>Obj.a: <input type="text" v-model="obj.a"></p>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou',
    number: 0,
    fullName: '',
    obj: {
      a: 0
    }
  },
  // computed和watch不要修改值，用于监听和处理成新的值
  computed: {
    name: {
      get() {
        console.log('new name')
        return `${this.firstName} ${this.lastName}`
      },
      set(name) {
        const names = name.split(' ')
        this.firstName = names[0]
        this.lastName = names[1]
      }
    }
  },
  watch: {
    // obj:{
    // handler() {
    //   console.log('obj.a changed')
    //   this.obj.a += 1
    // },
    // 声明后立马执行
    // immediate: true
    // deep: true //对象内的属性想要被监听，可以加这个属性。
    // }
    // 这是优化的方法
    'obj.a': {
      // 场景：监听到某一个数据的变化，然后做某一些操作
      handler() {
        console.log('obj.a changed')
        // this.obj.a += 1 //不要在watch和computed里改值
      },
      // 声明后立马执行
      immediate: true
    }
  },
  methods: {
    getName() {
      console.log('getName invoked')
      return `${this.firstName} ${this.lastName}`
    }
  }
})
